<!DOCTYPE html>
<html lang="en">

<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<meta name="viewport"
		content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
	<meta name="format-detection" content="telephone=no">
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="apple-mobile-web-app-status-bar-style" content="black">
	<link rel="stylesheet" href="css/reset.css">
	<link rel="stylesheet" href="css/index.css">
	<title>福利币转移</title>
	<script type="text/javascript" src="js/flexible.js"></script>
</head>

<body>
	<div class="content msqk pt80" id="app">
		<!-- header -->
		<header class="dheader flex-align flex-between" style="background-color: #13B9C7;">
			<a href="javascript:history.back(-1);" class="dheader-back iconfont iconleft cfff"></a>
			<div class="dheader-title tc cfff">
				<span>福利币转移</span>
				<span class="iconfont iconwenhao2 ml10" @click="showHelp"></span>
			</div>
		</header>
		<!--  -->
		<!--  -->
		<!-- sqk-top -->
		<div class="sqk-top">
			<img class="img10" src="./images/my/sqk/sqkimg2.png" mode="widthFix"></img>
		</div>
		<!-- sqk-head -->
		<div class="sqk-head flex">
			<div class="sqk-hl flex-column flex1">
				<div class="sqk-hlt flex-align">
					<span class="sqk-hla iconfont iconcardb"></span>
					<div class="">
						<span class="sqk-hlb">省钱卡</span>
						<span class="sqk-hlc" v-if="xkey && endTime">(已开通)</span>
					</div>
				</div>
				<span class="sqk-hltb fz24 bold">每天可领福利币</span>
				<span class="sqk-hltt fz24 bold" v-if="xkey && endTime">到期时间：{{endTime}} </span>
			</div>
			<div class="sqk-hr">
				<span class="sqk-hbtn" v-if="!(xkey && endTime)" @click="sqkSubFun">立即开通</span>
				<div v-if="xkey && endTime">
					<span class="sqk-hbtn" v-if="!isReceive" @click="getCoupon">领取福利币</span>
					<span class="sqk-hbtn show-app" v-else>去使用</span>
					<span class="sqk-hflb flex-center-align" v-if="xkey">余额: {{djq}}</span>
				</div>
			</div>
		</div>
		<!-- sqk-main -->
		<div class="sqk-main flex1">
			<!-- 服务选择 -->
			<div class="sqk-title">
				<span>服务选择</span>
			</div>
			<!-- sqk-ul -->
			<div class="sqk-ul">
				<div class="sqk-li" @click="sqkLiClick(item,index)" :class="cur==index?'on':''"
					v-for="(item,index) in dataList" :key="index">
					<span class="sqk-lfl flex-center-align" v-if="item.rebate">首次{{item.rebate}}%返利</span>
					<div class="sqk-lfz flex-center-align" v-else-if="item.discount_str">
						<span>{{item.discount_str}}折</span>
					</div>
					<div class="sqk-lia">
						<span>{{item.name}}</span>
					</div>
					<div class="sqk-lib">
						<span>￥</span>
						<span>{{item.money}}</span>
					</div>
					<div class="sqk-lic">
						<span>￥{{item.old_money}}</span>
					</div>
					<span v-if="item.rebate && item.special && item.special.flb"
						class="sqk-lfc flex-center-align">{{item.special.flb}}</span>
				</div>
			</div>
			<!-- 每天可领取 -->
			<div class="sqk-day flex-column flex-center">
				<div class="sqk-daya flex-align fz24">
					<span>每天可领取</span>
					<span class="cff4">{{receiveDjq}}</span>
					<span>个福利币 </span>
					<span class="fz22 c26a">（当天未使用会过期） </span>
				</div>
				<span class="sqk-dayb">注：该福利币全平台适用,但不可使用福利币转移。</span>
			</div>
			<!-- 首次开通特权 -->
			<div v-if="firstPay">
				<div class="sqk-title">
					<span>首次开通特权</span>
					<image class="sqk-icon" src="./images/my/sqk/sqkicon1.png" mode=""></image>
				</div>
				<div class="sqk-box">
					<div class="sqk-bt">
						<span>首次开通年卡、季卡、月卡时可获得丰厚返利！</span>
					</div>
					<div class="sqk-con flex-column flex-center-align">
						<image class="sqk-img1" src="./images/my/sqk/sqkimg4.png" mode="widthFix"></image>
						<span class="sqk-txt">注：获得的福利币可自由分配,该特权仅为首次开通有效</span>
					</div>
				</div>
			</div>
			<!-- 年卡用户尊享 -->
			<div class="sqk-title">
				<span>年卡用户尊享</span>
			</div>
			<div class="sqk-box">
				<div class="sqk-bt">
					<span>年卡用户每月可额外获取30福利币.</span>
				</div>
				<div class="sqk-con flex-column flex-center-align">
					<image class="sqk-img2" src="./images/my/sqk/sqkimg5.png" mode="widthFix"></image>
					<span class="sqk-txt mt10">年卡用户每月可额外获取30福利币</span>
				</div>
			</div>
			<!-- 锤一锤福利说明 -->
			<div class="sqk-title">
				<span>锤一锤福利说明</span>
			</div>
			<div class="sqk-box">
				<div class="sqk-bt">
					<span>开通省钱卡，获得金色锤子敲击次数</span>
				</div>
				<div class="sqk-con flex-column flex-center-align">
					<image class="sqk-img4" src="./images/my/sqk/sqkimg7.png" mode="widthFix"></image>
					<span class="sqk-txt">开通省钱卡，每日获得金色锤子敲击次数×1</span>
				</div>
			</div>
			<!--  -->
			<div class="sqk-title">
				<span>省钱卡用户可参与神秘活动哦~</span>
			</div>
			<div class="sqk-box">
				<div class="sqk-bt">
					<span>后续版本更新可参与神秘活动.</span>
				</div>
				<div class="sqk-con flex-column flex-center-align">
					<image class="sqk-img3" src="./images/my/sqk/sqkimg6.png" mode="widthFix"></image>
					<span class="sqk-txt">更多神秘活动等你参与</span>
				</div>
			</div>

			<div style="height: 20px;"></div>
		</div>
		<!-- 立即开通 -->
		<div class="sqk-foot flex-center-align">
			<span class="sqk-fbtn flex-center-align" @click="sqkSubFun">{{ (xkey && endTime)?'立即续期':'立即开通'}}</span>
		</div>
		<!-- 省钱卡购买须知 -->
		<div class="pop"></div>
		<div class="tier-pop jkzk-box">
			<div class="jkzk-title flex-center-align"><span>省钱卡购买须知</span></div>
			<div class="jkzk-p flex-column">
				<span>1、购买后可立即领取6个福利币，后续每日可领取一次。</span>
				<span>2、每日领取的福利币仅当天有效。</span>
				<span>3、重复购买或续费省钱卡时间将延长。</span>
				<span>4、省钱卡福利币使用后不支持退还。</span>
				<span>5、未成年及未实名用户不可购买。</span>
				<span>6、省钱卡属虚拟产品，开通后不支持退款。</span>
			</div>
			<div class="jkzk-b flex-center-align" @click="isShow=false">
				<span>我知道了</span>
			</div>
		</div>
		<!-- 支付弹窗 -->
		<div class="tier-popup pay-bpop">
			<div class="pay-bpop-name">需要支付</div>
			<div class="pay-bpop-close iconfont iconguanbi"></div>
			<div class="pay-bpop-num flex">
				<span class="fz32">￥</span>
				<span class="fz52 ">50.00</span>
			</div>
			<div class="pay-bpop-tb flex-align flex-between">
				<span>充值道具</span>
				<span>省钱卡</span>
			</div>
			<div>
				<div class="pay-bpop-li flex-align mt50" :class="payType=='zfb'?'on':''" @click="payType='zfb'">
					<span class="pay-bpop-la iconfont iconalipay" style="color:#1677FF"></span>
					<span class="pay-bpop-lb">支付宝</span>
					<span class="pay-bpop-lc iconfont iconchoice0"></span>
				</div>
				<div class="pay-bpop-li flex-align" :class="payType=='wx'?'on':''" @click="payType='wx'">
					<span class="pay-bpop-la iconfont iconweixinzhifu" style="color:#00C800"></span>
					<span class="pay-bpop-lb">微信</span>
					<span class="pay-bpop-lc iconfont iconchoice0"></span>
				</div>
			</div>
			<div class="pay-bpop-f flex-center-align" @click="payFun"><span>去支付</span></div>
		</div>
		<!--  -->
	</div>
	<!--  -->
	<script src="js/jquery.min.js"></script>
	<script src="js/vue.global.js"></script>
	<script src="js/used.js"></script>
	<script>

		const { createApp, ref, reactive, onMounted } = Vue
		createApp({
			setup() {
				onMounted(() => {
					$('#app').show()
					getPayInfo()
					// showPayPop();

				})
				let lzType = ref(''); //卡类型
				let dataList = ref([]); //卡列表
				let cur = ref(0); //当前选择
				let djq = ref(''); //当前余额
				let isShow = ref(false); //是否显示须知弹窗
				let ptext = ref(''); //当前选择的金额
				let pmain = ref(''); //当前选择名称
				let pType = ref(''); //当前选择类型
				let xkey = ref(''); //当
				let endTime = ref(''); //到期时间  没有值说明没有开通
				let receiveDjq = ref(''); //每日可领取数量
				let isReceive = ref(''); //是否已领取 0：未领取 1：已领取
				let discount = ref(''); //优惠券折扣比例 蓝钻带的
				let couponId = ref(''); //优惠券ID 蓝钻带的
				let firstPay = ref(0); //是否首次购买
				let payType = ref(''); //支付方式 zfb：支付宝 wx：微信 
				//方法
				//支付成功
				function paySucc() {
					getPayInfo();
				}
				// 领取福利币
				async function getCoupon() {
					toast.ajaxLoading('')
					let res = await this.$u.api.SQKgetCoupon();
					toast.success(res.msg)
					if (res.code == 10000) {
						getPayInfo();
					}
				}
				// 获取省钱卡数据
				async function getPayInfo(type) {
					let params = {
						type: lzType.value
					}
					// console.log(params, '----params')
					let res = {
						"code": 10000,
						"msg": "成功",
						"data": {
							"expire_time": 1748596521,
							"expire_day": "",
							"is_receive": 0,
							"djq": 0,
							"coupon": {
								"id": 9,
								"name": "会员满6减6",
								"gid": 0,
								"start_time": "2023-08-02 00:00:00",
								"end_time": "2038-01-19 11:14:07",
								"agent": "",
								"remain_number": 99999453,
								"total_number": 99999999,
								"pay_money": "6",
								"coupon_money": "6",
								"loopday": 0,
								"time": "2038-01-19",
								"is_pay": 1,
								"status": 0
							},
							"receive_djq": 6,
							"is_coupon": 0,
							"discount": 0,
							"coupon_id": 0,
							"first_pay": 1,
							"month_card_coupon": [
								{
									"id": 1,
									"user_id": 4750,
									"name": "省钱卡8折优惠券",
									"card_type": "month",
									"orderid": null,
									"coupon_id": 1,
									"discount": "0.80",
									"status": 0,
									"createtime": 1745231379
								},
								{
									"id": 8,
									"user_id": 4750,
									"name": "省钱卡8折优惠券",
									"card_type": "season",
									"orderid": null,
									"coupon_id": 2,
									"discount": "0.80",
									"status": 0,
									"createtime": 1745377079
								}
							],
							"list": [
								{
									"money": 499,
									"old_money": 2600,
									"rebate": 100,
									"type": "year",
									"extra": "0",
									"name": "年卡",
									"discount_str": "",
									"discount": 0,
									"special": {
										"discount": "1.6",
										"flb": "赠499福利币"
									},
									"first_pay": 1
								},
								{
									"money": 129,
									"old_money": 560,
									"rebate": 50,
									"type": "season",
									"extra": "0",
									"name": "季卡",
									"discount_str": "",
									"discount": "0.80",
									"special": {
										"discount": "2.1",
										"flb": "赠65福利币"
									},
									"first_pay": 1
								},
								{
									"money": 49,
									"old_money": 180,
									"rebate": 20,
									"type": "month",
									"extra": "0",
									"name": "月卡",
									"discount_str": "",
									"discount": "0.80",
									"special": {
										"discount": "2.5",
										"flb": "赠9.8福利币"
									},
									"first_pay": 1
								},
								{
									"money": 15,
									"old_money": 42,
									"rebate": 0,
									"type": "week",
									"extra": "0",
									"name": "周卡",
									"discount_str": "",
									"discount": 0,
									"special": {
										"discount": "3.3",
										"flb": ""
									},
									"first_pay": 1
								}
							],
							"prompt": "1购买后， 首日可立即领取获取1张满6减6优惠券，后续每日可领取张;\r\n2优惠券有效期为1天(领取24小时有效期) ;\r\n3重复购买或续费月卡时间将延长，有效期内每日仅可获取1张优惠券;\r\n4月卡优惠券使用后不支持退还;\r\n5.来成年及東实名的用户禁止购买月卡;\r\n6.月卡属虚拟产品，开通后(包括过期)不支持退款:\r\n"
						}
					}
					console.log(res, '----res')
					if (res.code == 10000) {
						let data = res.data;
						let expireTime = data.expire_time * 1000; //到期时间
						//到期时间大于当前时间  说明已开通且未到期
						if (expireTime > new Date().getTime()) {
							// endTime.value = dayjs(expireTime).format("YYYY-MM-DD")
						} else {
							endTime.value = '';
						}
						firstPay.value = data.first_pay;
						dataList.value = data.list || []; //卡列表
						djq.value = data.djq; //当前余额
						isReceive.value = data.is_receive; //是否已领取 0：未领取 1：已领取
						receiveDjq.value = data.receive_djq; //每日可领取数量
						if (type == 1 && cur.value == 0) {
							let curr = 0;
							//有值  且 可用
							if (lzType.value && data.is_coupon) {
								data.list.forEach((item, index) => {
									if (item.type == lzType.value) {
										curr = index;
									}
								})
								couponId.value = data.coupon_id; //优惠券ID
								discount.value = data.discount; //优惠券比例
								sqkLiClick(data.list[curr], curr); //蓝钻来的 默认点击 且拉起
								sqkSubFun()
							} else {
								qkLiClick(data.list[0], 0); //默认点击第一个卡
							}
						}
					}
				}
				//选择
				function sqkLiClick(item, index) {
					ptext.value = item.money;
					pType.value = item.type;
					pmain.value = item.name;
					cur.value = index;
				}
				//点击开通
				function sqkSubFun() {
					showAnimation('.pay-bpop,.pop');
				}
				//确认支付
				function payFun() {
					if (!payType.value) {
						toast.success('请选择支付方式')
						return;
					}
					toast.success('去支付吧')
				}
				//显示省钱卡购买须知
				function showHelp() {
					showAnimation('.jkzk-box,.pop');
				}
				//隐藏省钱卡购买须知
				$(document).on('click', '.jkzk-b', function () {
					hideAnimation('.jkzk-box,.pop');
				})
				//
				return {
					lzType,
					dataList,
					cur,
					djq,
					isShow,
					ptext,
					pmain,
					pType,
					xkey,
					endTime,
					receiveDjq,
					isReceive,
					discount,
					couponId,
					firstPay,
					payType,
					paySucc,
					getCoupon,
					getPayInfo,
					sqkLiClick,
					sqkSubFun,
					showHelp,
					payFun
				}
			}
		}).mount('#app')
	</script>
</body>

</html>